---
title: Knoppen
image: /images/user-guide/views/filter.png
---

<Frame>
  <img src="/images/user-guide/views/filter.png" alt="Header" />
</Frame>

Een lijst van knoppen en knopgroepen die in de app worden gebruikt.

## Knop

<Tabs>

<Tab title="Usage">

```jsx
import { Button } from "@/ui/input/button/components/Button";

export const MyComponent = () => {
  return (
    <Button
      className
      Icon={null}
      title="Title"
      fullWidth={false}
      variant="primary"
      size="medium"
      position="standalone"
      accent="default"
      soon={false}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Props            | Soort                 | Beschrijving                                                                                                                                         |
| ---------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| className        | tekenreeks            | Optionele klassennaam voor extra styling                                                                                                             |
| Pictogram        | `React.ComponentType` | Een optionele pictogramcomponent die in de knop wordt weergegeven                                                                                    |
| titel            | tekenreeks            | De tekstinhoud van de knop                                                                                                                           |
| volledigeBreedte | booleaan              | Definieert of de knop de volledige breedte van zijn container moet beslaan                                                                           |
| variant          | tekenreeks            | De visuele stijlvariant van de knop. Options include `primary`, `secondary`, and `tertiary`                                          |
| grootte          | tekenreeks            | De grootte van de knop. Heeft twee opties: `klein` en `medium`                                                       |
| positie          | tekenreeks            | The position of the button in relation to its siblings. Options include: `standalone`, `left`, `right`, and `middle` |
| accent           | tekenreeks            | De accentkleur van de knop. Options include: `default`, `blue`, and `danger`                                         |
| binnenkort       | booleaan              | Geeft aan of de knop als "binnenkort" is gemarkeerd (zoals voor aanstaande functies)                                              |
| uitgeschakeld    | booleaan              | Geeft aan of de knop is uitgeschakeld of niet                                                                                                        |
| focus            | booleaan              | Geeft aan of de knop focus heeft                                                                                                                     |
| onClick          | functie               | Een terugroepfunctie die wordt geactiveerd wanneer de gebruiker op de knop klikt                                                                     |

</Tab>

</Tabs>

## Knop Groep

<Tabs>
<Tab title="Usage">
```jsx
import { Button } from "@/ui/input/button/components/Button";
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

export const MyComponent = () => {
return ( <ButtonGroup variant="primary" size="large" accent="blue" className>
<Button
className
Icon={null}
title="Button 1"
fullWidth={false}
variant="primary"
size="medium"
position="standalone"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 2"
fullWidth={false}
variant="secondary"
size="medium"
position="left"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 3"
fullWidth={false}
variant="tertiary"
size="medium"
position="right"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/> </ButtonGroup>
);
};

````
</Tab>

<Tab title="Props">


| Props | Type | Description |
|-------|------|-------------|
| variant | string | The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary` |
| size | string | The size of the buttons within the group. Has two options: `medium` and `small` |
| accent | string | The accent color of the buttons within the group. Options include `default`, `blue` and `danger` |
| className | string | Optional class name for additional styling |
| children | ReactNode | An array of React elements representing the individual buttons within the group |



</Tab>
</Tabs>


## Floating Button

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButton
      className
      Icon={IconSearch}
      title="Title"
      size="medium"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={true}
    />
  );
};
````

</Tab>

<Tab title="Props">

| Props              | Soort                 | Beschrijving                                                                                                                                     |
| ------------------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| className          | tekenreeks            | Optionele naam voor extra styling                                                                                                                |
| Pictogram          | `React.ComponentType` | Een optionele pictogramcomponent die in de knop wordt weergegeven                                                                                |
| titel              | tekenreeks            | De tekstinhoud van de knop                                                                                                                       |
| grootte            | tekenreeks            | De grootte van de knop. Heeft twee opties: `klein` en `medium`                                                   |
| positie            | tekenreeks            | The position of the button in relation to its siblings. Options include: `standalone`, `left`, `middle`, `right` |
| schaduwToepassen   | booleaan              | Bepaalt of schaduw op een knop wordt toegepast                                                                                                   |
| vervagingToepassen | booleaan              | Bepaalt of een vervagingseffect op de knop wordt toegepast                                                                                       |
| uitgeschakeld      | booleaan              | Bepaalt of de knop is uitgeschakeld                                                                                                              |
| focus              | booleaan              | Geeft aan of de knop focus heeft                                                                                                                 |

</Tab>
</Tabs>

## Drijvende Knop Groep

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButtonGroup size="small">
      <FloatingButton
        className
        Icon={IconClipboardText}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
        focus={true}
      />
      <FloatingButton
        className
        Icon={IconCheckbox}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
      />
    </FloatingButtonGroup>
  );
};
```

</Tab>

<Tab title="Props">

| Props    | Soort      | Beschrijving                                                                                   | Standaard |
| -------- | ---------- | ---------------------------------------------------------------------------------------------- | --------- |
| grootte  | tekenreeks | De grootte van de knop. Heeft twee opties: `klein` en `medium` | klein     |
| children | ReactNode  | Een array van React-elementen die de individuele knoppen binnen de groep vertegenwoordigen     |           |

</Tab>

</Tabs>

## Drijvende Pictogram Knop

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingIconButton
      className
      Icon={IconSearch}
      size="small"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={false}
      onClick={() => console.log("click")}
      isActive={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Props              | Soort                 | Beschrijving                                                                                                                                         |
| ------------------ | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| className          | tekenreeks            | Optionele naam voor extra styling                                                                                                                    |
| Pictogram          | `React.ComponentType` | Een optionele pictogramcomponent die in de knop wordt weergegeven                                                                                    |
| grootte            | tekenreeks            | De grootte van de knop. Heeft twee opties: `klein` en `medium`                                                       |
| positie            | tekenreeks            | The position of the button in relation to its siblings. Options include: `standalone`, `left`, `right`, and `middle` |
| schaduwToepassen   | booleaan              | Bepaalt of schaduw op een knop wordt toegepast                                                                                                       |
| vervagingToepassen | booleaan              | Bepaalt of een vervagingseffect op de knop wordt toegepast                                                                                           |
| uitgeschakeld      | booleaan              | Bepaalt of de knop is uitgeschakeld                                                                                                                  |
| focus              | booleaan              | Geeft aan of de knop focus heeft                                                                                                                     |
| onClick            | functie               | Een terugroepfunctie die wordt geactiveerd wanneer de gebruiker op de knop klikt                                                                     |
| isActive           | booleaan              | Bepaalt of de knop in een actieve staat is                                                                                                           |

</Tab>

</Tabs>

## Drijvende Pictogram Knop Groep

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  const iconButtons = [
    {
      Icon: IconClipboardText,
      onClick: () => console.log("Button 1 clicked"),
      isActive: true,
    },
    {
      Icon: IconCheckbox,
      onClick: () => console.log("Button 2 clicked"),
      isActive: true,
    },
  ];

  return (
    <FloatingIconButtonGroup
    className
    size="small"
    iconButtons={iconButtons} />
  );
};

```

</Tab>

<Tab title="Props">

| Props            | Soort      | Beschrijving                                                                                                                                                                                                                                                                                                  |
| ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className        | tekenreeks | Optionele naam voor extra styling                                                                                                                                                                                                                                                                             |
| grootte          | tekenreeks | De grootte van de knop. Heeft twee opties: `klein` en `medium`                                                                                                                                                                                                                |
| pictogramKnoppen | lijst      | Een array van objecten, elk vertegenwoordigt een pictogramknop in de groep. Elk object moet de pictogramcomponent bevatten die je in de knop wilt weergeven, de functie die je wilt aanroepen wanneer een gebruiker op de knop klikt, en of de knop actief moet zijn of niet. |

</Tab>

</Tabs>

## Lichte Knop

<Tabs>
<Tab title="Usage">

```jsx
import { LightButton } from "@/ui/input/button/components/LightButton";

export const MyComponent = () => {
  return <LightButton
  className
  icon={null}
  title="Title"
  accent="secondary"
  active={false}
  disabled={false}
  focus={true}
  onClick={()=>console.log('click')}
  />;
};
```

</Tab>

<Tab title="Props">

| Props         | Soort             | Beschrijving                                                                                            |
| ------------- | ----------------- | ------------------------------------------------------------------------------------------------------- |
| className     | tekenreeks        | Optionele naam voor extra styling                                                                       |
| pictogram     | `React.ReactNode` | Het pictogram dat je in de knop wilt weergeven                                                          |
| titel         | tekenreeks        | De tekstinhoud van de knop                                                                              |
| accent        | tekenreeks        | De accentkleur van de knop. Options include: `secondary` and `tertiary` |
| actief        | booleaan          | Bepaalt of de knop in een actieve staat is                                                              |
| uitgeschakeld | booleaan          | Bepaalt of de knop is uitgeschakeld                                                                     |
| focus         | booleaan          | Geeft aan of de knop focus heeft                                                                        |
| onClick       | functie           | Een terugroepfunctie die wordt geactiveerd wanneer de gebruiker op de knop klikt                        |

</Tab>

</Tabs>

## Lichte Pictogram Knop

<Tabs>
<Tab title="Usage">

```jsx
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <LightIconButton
      className
      testId="test1"
      Icon={IconSearch}
      title="Title"
      size="small"
      accent="secondary"
      active={true}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Props         | Soort                 | Beschrijving                                                                                            |
| ------------- | --------------------- | ------------------------------------------------------------------------------------------------------- |
| className     | tekenreeks            | Optionele naam voor extra styling                                                                       |
| testId        | tekenreeks            | Test identificatie voor de knop                                                                         |
| Pictogram     | `React.ComponentType` | Een optionele pictogramcomponent die in de knop wordt weergegeven                                       |
| titel         | tekenreeks            | De tekstinhoud van de knop                                                                              |
| grootte       | tekenreeks            | De grootte van de knop. Heeft twee opties: `klein` en `medium`          |
| accent        | tekenreeks            | De accentkleur van de knop. Options include: `secondary` and `tertiary` |
| actief        | booleaan              | Bepaalt of de knop in een actieve staat is                                                              |
| uitgeschakeld | booleaan              | Bepaalt of de knop is uitgeschakeld                                                                     |
| focus         | booleaan              | Geeft aan of de knop focus heeft                                                                        |
| onClick       | functie               | Een terugroepfunctie die wordt geactiveerd wanneer de gebruiker op de knop klikt                        |

</Tab>

</Tabs>

## Hoofd Knop

<Tabs>
<Tab title="Usage">

```jsx
import { MainButton } from "@/ui/input/button/components/MainButton";
import { IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <MainButton
      title="Checkbox"
      fullWidth={false}
      variant="primary"
      soon={false}
      Icon={IconCheckbox}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Props                | Soort                            | Beschrijving                                                                                            |
| -------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------- |
| titel                | tekenreeks                       | De tekstinhoud van de knop                                                                              |
| volledigeBreedte     | booleaan                         | Definieert of de knop de volledige breedte van zijn container moet beslaan                              |
| variant              | tekenreeks                       | De visuele stijlvariant van de knop. Options include `primary` and `secondary`          |
| binnenkort           | booleaan                         | Geeft aan of de knop als "binnenkort" is gemarkeerd (zoals voor aanstaande functies) |
| Pictogram            | `React.ComponentType`            | Een optionele pictogramcomponent die in de knop wordt weergegeven                                       |
| React `button` props | `React.ComponentProps<'button'>` | Alle standaard HTML-knop eigenschappen worden ondersteund                                               |

</Tab>

</Tabs>

## Afgeronde Pictogram Knop

<Tabs>
<Tab title="Usage">

```jsx
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <RoundedIconButton
      Icon={IconSearch}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Props                | Soort                                           | Beschrijving |
| -------------------- | ----------------------------------------------- | ------------ |
| Pictogram            | `React.ComponentType`                           |              |
| React `button` props | `React.ButtonHTMLAttributes<HTMLButtonElement>` |              |

</Tab>

</Tabs>
